<% layout("/inc/layout_page.html"){ %>

<form action="${BASE}/admin/AdminMenu/save" id="form_save" method="post">
<input type="hidden" name="level" id="level" value="${pMenu.level+1}" />
<input type="hidden" name="parentId" id="parentId" value="${pMenu.id}" />
<div class="box">
  <div class="box-header">
    <h4 class="box-title"><i class="fa fa-bars"></i> 添加系统菜单</h4>
    <div class="box-tools">
      <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-save"></i> 保存</button>
      <a href="javascript:;" onclick="layer_close()" class="btn btn-info btn-sm"><i class="fa fa-chevron-left"></i> 返回</a>
    </div>
  </div>
  <div class="box-body">
    <table class="table tform table-bordered">
      <tr>
        <th width="30%"><label for="parentName">上级菜单：</label></th>
        <td>
          <div class="input-group">
            <input type="text" id="parentName" name="parentName" value="${pMenu.name}" class="form-control" readonly="readonly" >
            <span class="input-group-btn" id="btn_span_parentIds"><button type="button" class="btn btn-info btn-flat"><i class="fa fa-th"></i> 选择上级菜单</button></span>
          </div>
        </td>
      </tr>
      <tr>
        <th><label for="name">菜单名称：</label></th>
        <td><input id="name" name="name" type="text" class="form-control"></td>
      </tr>
      <tr>
        <th><label for="href">链接：</label></th>
        <td><input id="href" name="href" type="text" class="form-control"></td>
      </tr>
      <tr>
        <th><label for="icon">图标：</label></th>
        <td>
          <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-circle-o"></i></span>
            <input type="text" id="icon" name="icon" value="fa fa-circle-o" class="form-control">
            <span class="input-group-btn" id="btn_span_icon"><button type="button" class="btn btn-info btn-flat"><i class="fa fa-th"></i> 选择图标</button></span>
          </div>
        </td>
      </tr>
      <tr>
        <th><label for="isShow">是否在菜单中显示：</label></th>
        <td>
          <label class="control-label"><input type="radio" name="isShow" class="minimal" value="1" checked> 显示</label>
          <label class="control-label"><input type="radio" name="isShow" class="minimal" value="0"> 隐藏</label>
        </td>
      </tr>
      <tr>
        <th><label for="permission">权限标识：</label></th>
        <td><input id="permission" name="permission" type="text" class="form-control"></td>
      </tr>

      <tr>
        <th><label for="remarks">备注信息：</label></th>
        <td>
        	<textarea id="remarks" name="remarks" cols="" rows="" class="form-control"  placeholder="备注信息...255个字符以内" dragonfly="true" onKeyUp="textarealength(this,255)"></textarea>
          <p class="textarea-numberbar"><em class="textarea-length">0</em>/255</p>
        </td>
      </tr>
    </table>
  </div>
  <div class="box-footer">
    <div class="box-tools pull-right">
      <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-save"></i> 保存</button>
      <a href="javascript:;" onclick="layer_close()" class="btn btn-info btn-sm"><i class="fa fa-chevron-left"></i> 返回</a>
    </div>
  </div>
</div>
</form>


  <div id="div_menu_select_tree" class="content" style="display: none;">
    <div class="box box-solid">
      <div class="box-body">
        <ul id="ul_menu_select_tree" class="ztree"></ul>
      </div>
    </div>
  </div>
  

          
<script type="text/javascript">
function setIcon(i){
	var input_text = $("#form_save #icon");
	input_text.val(i);
	input_text.prev().children("i").attr("class",i);
}

$(function(){

    $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
      checkboxClass: 'icheckbox_minimal-blue',
      radioClass: 'iradio_minimal-blue'
    });
    
	var menuTree;
	var tree_setting = {};
	
	function showDailog(){
		if(!menuTree){
			$("#ul_menu_select_tree").html("<li>没有菜单数据</li>");
		}
		layer.open({
			type: 1,
			shadeClose:true,
			title :'选择上级菜单',
			area: ['80%', '90%'],
			content: $('#div_menu_select_tree'),
			btn: ['确认选择', '取消', '设置为顶级菜单'],
			btn1: function(index, layero){
				if(menuTree){
					var nodes = menuTree.getSelectedNodes()[0];
					if(nodes){
						$("#form_save #parentId").val(nodes.id);
						$("#form_save #level").val(parseInt(nodes.level)+1);
						$("#form_save #parentName").val(nodes.name);
					}
				};
				layer.close(index);
			},
			btn2: function(index, layero){}, 
			btn3: function(index){
				$("#form_save #parentId").val(0);
				$("#form_save #level").val(0);
				$("#form_save #parentName").val('顶级菜单');
			}
		});
	}
	function select_parent_menu(){
		if(menuTree){
			showDailog();
		}else{
			$.getJSON("${BASE}/admin/AdminMenu/menuTreeData",{}, function(str){
				$("#ul_menu_select_tree").text("");
				if(str)
					menuTree = $.fn.zTree.init($("#ul_menu_select_tree"), tree_setting, str);
				else
					menuTree = null;
				showDailog();
			});
		}
	}
	
	$("#form_save #parentName, #form_save #btn_span_parentIds").click(select_parent_menu);
	
	$("#form_save").validate({
		errorPlacement: function(error, element) {
			error.appendTo(element.parent());
		},
		submitHandler : function(form) {
			layer.load(1, {shade: [0.3,'#fff']});
			$(form).ajaxSubmit({
				dataType:"json",
				success:function( jsondata ){
					layer.closeAll('loading');
					if( jsondata.success){
						parent.toastr.success('保存成功！');
						parent.loadTree();
						layer_close();
					}else{
						toastr.error('出错了！');
					}
				}
			});
		},
		rules : {
			name : {
				required : true
			}
		}, 
		messages : { 
			name : { 
				required : "名称不能为空"
			}
		}
	});
	
	$("#btn_span_icon").click(function(){
	    var index = layer.open({
			type: 2,
			closeBtn: 1,
			title: "选择图标",
			area: ['98%', '98%'],
			content: "${BASE}/public/iconSelect"
		});
	});
});
</script>

<% } %>